<template>
<div id="hello">
  <button v-bind:title="msg+'111'" @click="show()">nihao</button>
  <button>dian</button>
  <input type="text" value="hhh" v-model="msg">
  <h2>{{msg}}</h2>
  <input type="text" name="num1"  v-model="num1">
  <select name="opt" v-model="opt">
    <option>+</option>
    <option>-</option><option>/</option>
    <option>*</option>
  </select>
  <input type="text" name="num2"  v-model="num2">
  <button @click="calcu()">=</button>
  <input type="text" name="result"  v-model="result">
  <h1 class="red thin active">gggg</h1>
  <h1 :class="['red', 'thin', isActive?'active':'']">这是一个邪恶的H1</h1>
  <h1 :style='h1Style'>style</h1>
  <p v-for="(item,i) in list">{{item.name}}{{item.id}}</p>
  <p v-for="i in 10">这是第{{i}}</p>
</div>
</template>

<script>
export default {
name: "test",
  data() {
    return {
      msg: '<h1>helll</h1>',
      num1:0,
      num2:0,
      opt:"+",
result:0,
      isActive: false,
      h1Style:{color:'red' ,'font-size':'20px'},
      list:[{id:1,name:'qq'},{id:2,name:'ww'},{id:3,name:'ee'}]
    }
  },
  methods:{
  show:function(){
    alert(this.msg+'nihao')
  },
  calcu:function (){
    var hh='parseInt(this.num1)'+this.opt+'parseInt(this.num2)'
this.result=eval(hh);
  }
  }
}

</script>

<style lang="stylus" scoped>
.red
     color red
  .thin
     font-size 13px
.active
     letter-spacing 20px
</style>
